<template>
  <div class="upload-container">
    <h2>文件上传(暂不支持文件夹)</h2>
    <!-- 文件上传表单 -->
    <el-upload class="upload-demo" drag action="http://localhost:8080/upload" multiple
      :on-success="handleUploadSuccess">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>

    <!-- 已上传文件列表 -->
    <div v-if="files.length > 0">
      <h3>已上传文件:</h3>
      <ul>
        <li v-for="(file, index) in files" :key="index">{{ file }}</li>
      </ul>
    </div>
    <div v-else>
      <p>没有找到已上传的文件。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FileUploader',
  data() {
    return {
      files: []
    };
  },
  methods: {
    fetchFiles() {
      fetch('http://localhost:8080/files')
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          this.files = data;
        })
        .catch(error => {
          console.error('There has been a problem with your fetch operation:', error);
        });
    },
    handleUploadSuccess(response, file, fileList) {
      // 上传成功后的处理逻辑
      console.log("文件上传成功");
      // 重新获取文件列表
      this.fetchFiles();
    }
  },
  mounted() {
    this.fetchFiles(); // 页面加载时获取文件列表
  }
};
</script>

<style scoped>
.upload-container {
  width: 400px;
  margin: 50px auto;
  text-align: center;
}

.upload-demo {
  width: 100%;
}

/* 简单美化文件列表 */
ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #f9f9f9;
  margin: 5px 0;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>